<div class="da-list-wrap">
  <div class="da-content-banner">
    <d-breadcrumb>
      <d-breadcrumb-item><a routerLink="/">{{ 'device.breadcrumb.home' | translate }}</a></d-breadcrumb-item>
      <d-breadcrumb-item>{{ 'deviceTools.breadcrumb.deviceTools' | translate }}</d-breadcrumb-item>
    </d-breadcrumb>
  </div>

<div class="da-content-wrapper">
          <div class="departments">
            <div class="card">
              <div class="card-title">
                <span>夹具类别</span>
              </div>
              <div class="fitter mt-3">
                <input dTextInput placeholder="请输入" name="searchWarehouseCategoryValue" (input)="searchCategory($event)" />
              </div>
              <div class="card-body">
                <d-tree #basicTree [tree]="displayTreeData" [treeNodeIdKey]="'fixtureTypeId'"   [treeNodeTitleKey]="'fixtureTypeName'"   [treeNodeChildrenKey]="'subFixtureTypes'"  (afterTreeInit)="afterTreeInit($event)"
                (nodeSelected)="nodeSelected($event)">
                </d-tree>
              </div>
              <div class="card-footer">

                <d-button bsStyle="common"  class="" bsSize="sm" (btnClick)="CreatDepartment()">
                  新增
                </d-button>
                <d-button bsStyle="common"  class="" bsSize="sm" (click)="EditDepartment()" [ngClass]="{'disabled':!this.fixtureTypeId}">
                  编辑
                </d-button>
                <d-button bsStyle="danger"  class="" bsSize="sm" (click)="DeleteDepartment()" [ngClass]="{'disabled':!this.fixtureTypeId}">
                  删除
                </d-button>

            </div>
            </div>
          </div>
          <div class="employs-box">
            <div class="card">
              <div class="card-header">
                <div>
                  <div class="d-input">
                    <input dTextInput style="width: 150px;"  [error]="false" placeholder="编码/名称" [(ngModel)]="SearchTerm" name="SearchTerm">
                    <input dTextInput style="width: 150px;"  [error]="false" placeholder="设备型号" [(ngModel)]="model" name="model" style="margin: 0 8px;">
                  </div>
                  <d-button id="primaryBtn" style="margin-left: 8px" (click)="search()"><i class="icon icon-filter-o me-2" ></i>查询</d-button>
                  <d-button bsStyle="common" (btnClick)=" reset()"> <i class="icon icon-refresh me-2"></i>重置</d-button>
                </div>
                </div>
                <div class="btn-group">
                  <d-button bsStyle="primary" (btnClick)="creat()"> <i class="icon icon-add me-2"></i>新增</d-button>
                  <d-button style="margin-left: 8px;" bsStyle="danger" (btnClick)="deltes()"><i class="icon icon-delete me-2"></i>删除</d-button>
                </div>
                <div class="list-content">
                <d-data-table [lazy]="true" [dataSource]="displayTableData"
                [scrollable]="true" [fixHeader]="true" [resizeable]="true" [tableWidthConfig]="tableWidthConfig" (checkAllChange)="getCheckedRows()" (rowCheckChange)="getCheckedRows()" [tableOverflowType]="'auto'" [scrollable]="true" [resizeable]="true" [colDraggable]="true">
                  <thead dTableHead [checkable]="true" >
                    <tr dTableRow >
                      <th dHeadCell [fixedLeft]="'80px'" >
                        操作
                      </th>
                      <th dHeadCell [fixedLeft]="colOption.fixedLeft" *ngFor="let colOption of dataTableOptions.columns">{{ colOption.header }}</th>
                    </tr>
                  </thead>
                  <tbody dTableBody>
                    <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex" let-nestedIndex="nestedIndex">
                      <tr dTableRow>
                        <td dTableCell [fixedLeft]="'0px'" >
                          <d-checkbox [disabled]="false" [showAnimation]="true" [showGlowStyle]="false"
                          [ngModelOptions]="{ standalone: true }" [ngModel]="rowItem.$checked" dTooltip
                          (ngModelChange)="onRowCheckChange($event, rowIndex, nestedIndex, rowItem)"
                          ></d-checkbox>
                        </td>
                        <td dTableCell [fixedLeft]="'80px'" [rowItem]="rowItem">
                          <span class="me-2"(click)="edit(rowItem.fixtureId)" ><a class="devui-link">编辑</a></span>
                          <span><a class="devui-link" (click)="delete(rowItem.fixtureId)">删除</a></span>
                        </td>
                        <td dTableCell [rowItem]="rowItem" [fixedLeft]="'200px'">
                          <span dTooltip [content]="rowItem?.fixtureNum">{{rowItem?.fixtureNum}}</span>
                        </td>
                        <td dTableCell [rowItem]="rowItem" [fixedLeft]="'300px'">
                          <span dTooltip [content]="rowItem?.fixtureName">{{rowItem?.fixtureName}}</span>
                        </td>
                        <td dTableCell [rowItem]="rowItem" ><span dTooltip [content]="rowItem?.model">{{rowItem.model}}</span></td>
                        <td dTableCell [rowItem]="rowItem" >
                          <div dImagePreview>
                            <d-badge *ngIf="rowItem.fileURL" [count]=getImagesArray(rowItem.fileURL).length status="success">
                              <ng-container *ngFor="let imageUrl of getImagesArray(rowItem.fileURL); let i = index">
                                <img *ngIf="getImagesArray(rowItem.fileURL).length>0" [src]="imageUrl" alt="图片" width="30px" height="30px" [ngStyle]="{'display': i === 0 ? 'block' : 'none'}"/>
                              </ng-container>
                          </d-badge>
                          </div>

                        </td>

                        <td dTableCell [rowItem]="rowItem" ><span dTooltip [content]="rowItem.purchaseDate | dateFormat">{{rowItem.purchaseDate | dateFormat}}</span></td>
                        <td dTableCell [rowItem]="rowItem" ><span dTooltip [content]="rowItem?.note">{{rowItem.note}}</span></td>

                      </tr>
                    </ng-template>
                  </tbody>
                </d-data-table>
                </div>
                  <div class="page-footer">
                    <div>
                      <p>已选 <span class="underline">{{deleteIDs.length}}</span> 条
                        <a (click)="cleared()">清空</a>
                      </p>
                    </div>
                    <d-pagination
                    [size]="'sm'"
                    [canViewTotal]="true"
                    [canChangePageSize]="true"
                    [canJumpPage]="true"
                    [maxItems]="5"
                    [total]="this.pager.total"
                    [pageSizeOptions]="this.pageSizeOptions"
                    [(pageSize)]="pager.pageSize"
                    [(pageIndex)]="pager.pageIndex"
                    (pageIndexChange)="pageIndexChange($event)"
                    (pageSizeChange)="pageSizeChange($event)"
                    >
                  </d-pagination>
                  </div>

            </div>
          </div>
</div>
</div>
<d-toast [value]="msgs" [life]="2000" [styleClass]="'custom-class'" [style]="{ left: '50%',top:'10px' }"></d-toast>
